<template>
  <div id="publish">
    <div class="header">
      <el-button @click="goBack" icon="el-icon-back" style="float:left;border:none;" size="small">返回</el-button>
      <span>曼唐图像标注系统</span>
      <el-button @click="handleFullScreen" :icon="fullscreen ? 'el-icon-crop' : 'el-icon-full-screen'" style="float:right;" size="small"></el-button>
      <el-button @click="fixToAutoWH" icon="fa fa-desktop" style="float:right;" size="small"></el-button>
    </div>
    <div class="content">
      <div class="tools">
        <tools @changeToolType="changeToolType" @changeColorThick="changeColorThick" @changeLineWidth="changeLineWidth" @getBase64="getBase64" :base64="base64"></tools>
      </div>
      <div class="graph-canvas">
        <graphCanvas ref="exprtCanvas" :toolType="toolType" :color="color" :lineWidth="width"></graphCanvas>
      </div>
    </div>
  </div>
</template>

<script>
import tools from "./tools"
import graphCanvas from "./graphCanvas"
export default {
  data() {
    return {
      fullscreen: false,
      toolType:0,
      color:'',
      width:2,
      base64:""
    }
  },
  components: {
    tools,graphCanvas
  },
  created() {
    window.console.log(this.$route)
  },
  mounted() {
  },
  methods: {
    // 全屏事件
    handleFullScreen() {
      let element = document.documentElement;
      // 判断是否已经是全屏
      // 如果是全屏，退出
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {    // 否则，进入全屏
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      // 改变当前全屏状态
      this.fullscreen = !this.fullscreen;
    },
    //切换标注工具
    changeToolType(type){
      this.toolType = type
    },
    //返回
    goBack() {
      this.$router.go(-1)
    },
    //改变颜色
    changeColorThick(val){
      this.color = val
    },
    //改变线条宽度
    changeLineWidth(val){
      this.width = val
    },
    //恢复初始自适应状态
    fixToAutoWH(){
      this.$refs["exprtCanvas"].fixToAutoWH()
    },
    //获取canvas base64图
    getBase64(){
      this.base64 = this.$refs["exprtCanvas"].getBase64();
    }
  }
}
</script>

<style lang="less" scoped>
#publish {
  position: relative;
  background: #f4f5f7;
  height: 100%;
}
.header {
  text-align: center;
  padding: 5px 10px;
  overflow: hidden;
  position: absolute;
  top: 0px;
  width: calc(100% - 20px);
  height:39px;
  border-bottom: 1px solid #e7e7e7;
}
.content {
  position: absolute;
  top: 50px;
  width: 100%;
  height:calc(100% - 50px);
}
.tools{
  float:left;
  width:299px;
  border-right: 1px solid #e7e7e7;
  height:100%;
}
.graph-canvas{
  float:left;
  width:calc(100% - 300px);
  height:100%;
  overflow:hidden;
}
</style>